<template>
    <div class="main">
        <div class="userInfo-div">
            <img style="width: 40px;height: 40px;border-radius: 50%;margin-left: 3px;margin-top: 5px;"
                src="../../images/defaultAtor.jpeg">
            <div style="padding-left: 5px;padding-top: 5px;">
                <div>{{ userName }}</div>
                <div style="margin-top: 3px;">
                    <span style="margin-left: 4px;font-size: var(--van-grid-item-text-font-size);">{{authDes}}</span>
                    <span style="margin-left: 4px;"><van-icon name="chat-o" color="green" /></span>
                    <span style="margin-left: 4px;"><van-icon name="wechat" color="green" /></span>
                    <span style="margin-left: 4px;"><van-icon name="vip-card" color="red" /></span>
                </div>
            </div>
        </div>
        <div style="background-color: aqua;">
            <van-grid :column-num="3">
                <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">
                        {{ balance }} &nbsp;&nbsp; RMB</span>
                    <van-button type="success" size="small" @click="chargeMoney()">充&nbsp;&nbsp;值</van-button>
                </van-grid-item>
                <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ userPoint }}</span>
                    <van-button type="success" size="small" @click="chargeMoney()">积&nbsp;&nbsp;分</van-button>
                </van-grid-item>
                <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ userCouponCount }}</span>
                    <van-button type="success" size="small" v-on:click="myCouponList()">优&nbsp;惠&nbsp;券</van-button>
                </van-grid-item>
            </van-grid>
        </div>

        <van-grid>
            
            <van-grid-item icon="balance-o" icon-color="red" text="我的收益" @click="income()"/>
            <van-grid-item icon="orders-o" icon-color="red" @click="myChargingOrderPage()" text="我的充电" />
            <van-grid-item icon="cluster" icon-color="red" text="我的邀请" @click="myInviteList()" />
            <van-grid-item icon="point-gift" icon-color="red" text="我的礼券" @click="myCouponList()"/>
        </van-grid>
        <van-grid>
            <van-grid-item icon="refund-o" icon-color="red" @click="myPayOrderPage()" text="我的支付" />
            <van-grid-item icon="points" icon-color="red"   @click="myPointPage()" text="我的积分" />
            <van-grid-item icon="bulb-o" icon-color="red"   @click="myStationPage()" text="我的桩站" />
            <van-grid-item icon="bill-o" icon-color="red" @click="authPage()" text="认证" />
        </van-grid>
        <van-grid>
            <van-grid-item icon="star-o" icon-color="red" text="我的收藏" />
            <van-grid-item icon="list-switch" icon-color="red" text="我的汽车" />
            <van-grid-item icon="friends-o" icon-color="red" text="我的组团" />
            <van-grid-item icon="phone" icon-color="red" text="我的客服" />
        </van-grid>
    </div>
</template>
<script setup>
import router from '@/router';
import { GetUserInfo } from '@/api/user.js'
import { UserCouponCount, UserPoint } from '@/api/market.js'
import {UserBalance} from '@/api/pay'
import { ref } from 'vue';
import {showToast} from "vant";

const userName = ref('');
const auth = ref(0);
const authDes = ref('');
const balance = ref(0);
const userCouponCount = ref(0);
const userPoint = ref(0);

init();

function init() {
  const token = localStorage.getItem("token");
  // 检查 token 是否为空字符串或其他非期望的值
    if (!token || token.trim() === '') { // 使用 trim() 来移除两端的空白字符并检查是否为空字符串
        console.info("token 不存在或为空字符串");
        router.push('/user/login');
    } else { 
        getUserInfo();

    }
}


function getUserInfo() {
    GetUserInfo()
        .then(res => {
            if (res.data.code === 200000) {
                userName.value = res.data.data.nickName;
                auth.value = res.data.data.authentication;
                authDes.value = getAuth(res.data.data.authentication);
                getUserCouponCount();
                getUserPoint();
                getUserBalance();
            } else {
                router.push('/user/login');
            }
        }).catch(error => {
            // 这里捕获GetUserInfo()方法执行过程中发生的任何错误
            console.error('An error occurred:', error);
            // 无论是由于什么错误，都跳转到登录页面
            router.push('/user/login');
        });
}
function getAuth(authentication) {
    if (authentication === 1) {
        return '待审核';
    } else if (authentication === 2) {
        return '认证通过';
    } else if (authentication === 3) {
      return '认证失败';
    }  else {
        return '待认证';
    }
}
function getUserBalance() {
  UserBalance()
      .then(res => {
        if (res.data.code === 200000) {
          balance.value = res.data.data.balance
        } else {
          // router.push('/user/login');
          console.info('查询余额失败')
        }
      }).catch(() => {
         console.info('查询余额失败')
      });
}
function getUserCouponCount() {
    UserCouponCount()
        .then(res => {
            if (res.data.code == 200000) {
                userCouponCount.value = res.data.data;
            } else {
                router.push('/user/login');
            }
        })
}



function getUserPoint() {
    UserPoint()
        .then(res => {
            if (res.data.code === 200000) {
                userPoint.value = res.data.data;
            } else {
                router.push('/user/login');
            }
        })
}

function chargeMoney() {
    router.push('/user/charge/money');
}

function myInviteList() {
    router.push('/my/invite');
}
function myCouponList() {
    router.push('/my/coupon/index');
}

function myChargingOrderPage() {
    router.push('/user/charging/order');
}
function myPayOrderPage() {
    router.push('/user/pay/order');
}
function income(){
    router.push('/income/myIncome')
}
function myPointPage() {
    router.push('/mine/point');
}

function myStationPage() {
  router.push('/mine/station');
}

function authPage() {
  if(auth.value === 2){
    showToast('已认证，无需再次认证');
    return;
  }
  router.push('/mine/auth');
}
</script>

<style>
.main {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

.userInfo-div {
    height: 65px;
    width: auto;
    display: flex;
    padding-top: 8px;
    /* background-color: aquamarine; */
}
</style>